<template>
  <xn-form-container :title="formData.id ? '编辑项目' : '增加项目'" :width="700" :visible="visible" :destroy-on-close="true"
    @close="onClose">
    <a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="项目名称：" name="itemName">
            <a-input v-model:value="formData.itemName" placeholder="请输入项目名称" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="价格：" name="cost">
            <a-input-number v-model:value="formData.cost" :min="1" :max="10000" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="服务时长（分钟）：" name="hoursService">
            <a-input-number v-model:value="formData.hoursService" :min="1" :max="10000" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="提前下钟时间（分钟）：" name="cutClockEarly">
            <a-input-number v-model:value="formData.cutClockEarly" :min="1" :max="10000" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="加钟价：" name="addTimeCost">
            <a-input-number v-model:value="formData.addTimeCost" :min="1" :max="10000" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="加钟时间（分钟,不填默认为项目原价和时长）：" name="addTime">
            <a-input-number v-model:value="formData.addTime" :min="1" :max="10000" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="公众号商城价：" name="wechatPrice">
            <a-input-number v-model:value="formData.wechatPrice" :min="1" :max="10000" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <div style="color: red;margin-bottom: 10px;">备注：以下提成不填默认为0</div>
        </a-col>
        <a-col :span="8">
          <a-form-item label="排钟提成：" name="arrangeCommission">
            <a-input-number v-model:value="formData.arrangeCommission" :min="1" :max="10000" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="点钟提成：" name="appointCommission">
            <a-input-number v-model:value="formData.appointCommission" :min="1" :max="10000" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="加钟提成：" name="overtimeCommission">
            <a-input-number v-model:value="formData.overtimeCommission" :min="1" :max="10000" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="call钟提成：" name="reservationCommission">
            <a-input-number v-model:value="formData.reservationCommission" :min="1" :max="10000" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="加班排钟提成：" name="extraArrangeCommission">
            <a-input-number v-model:value="formData.extraArrangeCommission" :min="1" :max="10000" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="加班点钟提成：" name="extraAppointCommission">
            <a-input-number v-model:value="formData.extraAppointCommission" :min="1" :max="10000" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="加班加钟提成：" name="extraOvertimeCommission">
            <a-input-number v-model:value="formData.extraOvertimeCommission" :min="1" :max="10000" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="接待排钟提成：" name="receptionistArrangeCommission">
            <a-input-number v-model:value="formData.receptionistArrangeCommission" :min="1" :max="10000"
              style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="接待点钟提成：" name="receptionistAppointCommission">
            <a-input-number v-model:value="formData.receptionistAppointCommission" :min="1" :max="10000"
              style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="接待加钟提成：" name="receptionistOvertimeCommission">
            <a-input-number v-model:value="formData.receptionistOvertimeCommission" :min="1" :max="10000"
              style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="接待call提成：" name="receptionistReservationCommission">
            <a-input-number v-model:value="formData.receptionistReservationCommission" :min="1" :max="10000"
              style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="技师推荐提成：" name="technicianRecommendCommission">
            <a-input-number v-model:value="formData.technicianRecommendCommission" :min="1" :max="10000"
              style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <div style="color: red;margin-bottom: 10px;">约客提成</div>
        </a-col>
        <a-col :span="12">
          <a-form-item label="预约排钟提成:" name="changeTimeCommission">
            <a-input-number v-model:value="formData.changeTimeCommission" :min="1" :max="10000" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="预约加钟提成:" name="priceGap">
            <a-input v-model:value="formData.priceGap" placeholder="请输入相差价格算改钟" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="预约点钟提成:" name="itemType">
            <a-select v-model:value="formData.itemType" placeholder="请选择项目类型" :options="itemTypeOptions" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="预约call钟提成:" name="countTime">
            <a-input-number v-model:value="formData.countTime" :min="1" :max="10000" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="其他（自由开单，店长推荐，客人端显示）：" name="other">
            <a-input-number v-model:value="formData.other" :min="1" :max="10000" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <div style="margin-bottom: 10px;">备注，提成下单后即使生效，中造变更提成不改变历史提成数据，对后续数报生效，接待排种提成包扩排钟、选钟。*****改钟设置目前只支持由低改高</div>
        </a-col>
        <a-col :span="12">
          <a-form-item label="价格相差:" name="describe">
            <a-input-number v-model:value="formData.describe" placeholder="请输入描述" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="改钟提成:" name="sortCode">
            <a-input-number v-model:value="formData.sortCode" :min="1" :max="10000" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="项目类型:" name="describe">
            <a-textarea v-model:value="formData.describe" placeholder="请输入描述" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="计算钟数:" name="sortCode">
            <a-input-number v-model:value="formData.sortCode" :min="1" :max="10000" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="其他:" name="sortCode">
            <a-input-number v-model:value="formData.sortCode" :min="1" :max="10000" style="width: 100%" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <template #footer>
      <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
      <a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
    </template>
  </xn-form-container>
</template>

<script setup name="bizItemForm">
import tool from '@/utils/tool'
import { cloneDeep } from 'lodash-es'
import { required } from '@/utils/formRules'
import bizItemApi from '@/api/biz/bizItemApi'
// 抽屉状态
const visible = ref(false)
const emit = defineEmits({ successful: null })
const formRef = ref()
// 表单数据
const formData = ref({})
const submitLoading = ref(false)
const itemTypeOptions = ref([])

// 打开抽屉
const onOpen = (record) => {
  visible.value = true
  if (record) {
    let recordData = cloneDeep(record)
    formData.value = Object.assign({}, recordData)
  }
  itemTypeOptions.value = tool.dictList('是')
}
// 关闭抽屉
const onClose = () => {
  formRef.value.resetFields()
  formData.value = {}
  visible.value = false
}
// 默认要校验的
const formRules = {
  itemName: [required('请输入项目名称')],
  cost: [required('请输入价格')],
  hoursService: [required('请输入服务时长（分钟）')],
}
// 验证并提交数据
const onSubmit = () => {
  formRef.value.validate().then(() => {
    submitLoading.value = true
    const formDataParam = cloneDeep(formData.value)
    bizItemApi
      .bizItemSubmitForm(formDataParam, formDataParam.id)
      .then(() => {
        onClose()
        emit('successful')
      })
      .finally(() => {
        submitLoading.value = false
      })
  })
}
// 抛出函数
defineExpose({
  onOpen
})
</script>
